<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成示例图片</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .image-preview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .image-item {
            text-align: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .image-item canvas {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .download-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .download-btn:hover {
            background: #0056b3;
        }
        .instructions {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>示例图片生成器</h1>
        
        <div class="instructions">
            <h3>使用说明：</h3>
            <p>1. 点击下方的"生成图片"按钮生成示例图片</p>
            <p>2. 点击"下载"按钮保存图片到本地</p>
            <p>3. 将下载的图片重命名并放入 images 文件夹中</p>
            <p>4. 刷新主页面查看效果</p>
        </div>

        <button onclick="generateAllImages()" style="background: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 16px;">
            生成所有示例图片
        </button>

        <div class="image-preview" id="imagePreview">
            <!-- 图片预览区域 -->
        </div>
    </div>

    <script>
        // 图片配置
        const imageConfigs = [
            { name: 'landscape1.jpg', width: 1200, height: 500, text: '风景照片1', color: '#4CAF50' },
            { name: 'landscape2.jpg', width: 1200, height: 500, text: '风景照片2', color: '#2196F3' },
            { name: 'landscape3.jpg', width: 1200, height: 500, text: '风景照片3', color: '#FF9800' },
            { name: 'photo1.jpg', width: 400, height: 300, text: '校园春色', color: '#9C27B0' },
            { name: 'photo2.jpg', width: 400, height: 300, text: '夕阳西下', color: '#F44336' },
            { name: 'photo3.jpg', width: 400, height: 300, text: '雨后彩虹', color: '#00BCD4' },
            { name: 'video-thumb1.jpg', width: 400, height: 250, text: '视频缩略图1', color: '#607D8B' },
            { name: 'video-thumb2.jpg', width: 400, height: 250, text: '视频缩略图2', color: '#795548' },
            { name: 'artwork1.jpg', width: 400, height: 300, text: '美术作品1', color: '#E91E63' },
            { name: 'artwork2.jpg', width: 400, height: 300, text: '美术作品2', color: '#3F51B5' },
            { name: 'project1.jpg', width: 400, height: 300, text: '科技项目1', color: '#009688' },
            { name: 'project2.jpg', width: 400, height: 300, text: '科技项目2', color: '#FF5722' }
        ];

        function generateImage(config) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            canvas.width = config.width;
            canvas.height = config.height;
            
            // 创建渐变背景
            const gradient = ctx.createLinearGradient(0, 0, config.width, config.height);
            gradient.addColorStop(0, config.color);
            gradient.addColorStop(1, adjustBrightness(config.color, -30));
            
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, config.width, config.height);
            
            // 添加装饰性图案
            ctx.fillStyle = 'rgba(255,255,255,0.1)';
            for (let i = 0; i < 5; i++) {
                ctx.beginPath();
                ctx.arc(
                    Math.random() * config.width,
                    Math.random() * config.height,
                    Math.random() * 50 + 20,
                    0,
                    2 * Math.PI
                );
                ctx.fill();
            }
            
            // 添加文字
            ctx.fillStyle = 'white';
            ctx.font = `bold ${Math.min(config.width, config.height) / 15}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(config.text, config.width / 2, config.height / 2);
            
            // 添加阴影效果
            ctx.shadowColor = 'rgba(0,0,0,0.3)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            
            return canvas;
        }

        function adjustBrightness(hex, percent) {
            const num = parseInt(hex.replace("#", ""), 16);
            const amt = Math.round(2.55 * percent);
            const R = (num >> 16) + amt;
            const G = (num >> 8 & 0x00FF) + amt;
            const B = (num & 0x0000FF) + amt;
            return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
                (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
                (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
        }

        function downloadImage(canvas, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }

        function generateAllImages() {
            const preview = document.getElementById('imagePreview');
            preview.innerHTML = '';
            
            imageConfigs.forEach(config => {
                const canvas = generateImage(config);
                
                const imageItem = document.createElement('div');
                imageItem.className = 'image-item';
                
                const canvasContainer = document.createElement('div');
                canvasContainer.appendChild(canvas);
                
                const downloadBtn = document.createElement('button');
                downloadBtn.className = 'download-btn';
                downloadBtn.textContent = '下载';
                downloadBtn.onclick = () => downloadImage(canvas, config.name);
                
                imageItem.appendChild(canvasContainer);
                imageItem.appendChild(document.createElement('br'));
                imageItem.appendChild(downloadBtn);
                imageItem.appendChild(document.createElement('br'));
                imageItem.appendChild(document.createTextNode(config.name));
                
                preview.appendChild(imageItem);
            });
        }

        // 页面加载时自动生成图片
        window.onload = generateAllImages;
    </script>
</body>
</html>
